<template>
	<view class="w-100">
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="show" :content="content" @confirm="confirm" :confirm-text="conf" :cancel-text="canc"
		 :show-cancel-button="cancel"></u-modal>
		<u-subsection :list="list" :current="curNow" buttonColor="#ff9900" active-color="#ffffff" @change="sectionChange"></u-subsection>
		<view class="bg-f1 h-100vh">
			<view class="tablebox" v-if="curNow ==0">
				<view v-for="(i,index) in tablelist" :key="index">
					<image src="../../static/table/unselected.png" mode="" v-if="i.canuse>0&&index!=curindex" @tap="selecttable(i,index)"></image>
					<image src="../../static/table/selected.png" mode="" v-if="i.canuse!=0&&index==curindex" @tap="selecttable(i,index)"></image>
					<image src="../../static/table/bought.png" mode="" v-if="i.canuse==0"></image>
					<view>
						<p>{{i.name}}</p>
						<p>{{i.capacity-i.canuse}}/{{i.capacity}}</p>
					</view>
					<image src="../../static/table/fee.png" mode="" v-if="i.tablefeetype!=0"></image>
				</view>
			</view>
			<view class="tablebox" v-else>
				<view v-for="(i,index) in bigtablelist" :key="index">
					<image src="../../static/table/unselected.png" mode="" v-if="i.canuse>0&&index!=curindex" @tap="selecttable(i,index)"></image>
					<image src="../../static/table/selected.png" mode="" v-if="i.canuse!=0&&index==curindex" @tap="selecttable(i,index)"></image>
					<image src="../../static/table/bought.png" mode="" v-if="i.canuse==0"></image>
					<view>
						<p>{{i.name}}</p>
						<p>{{i.capacity-i.canuse}}/{{i.capacity}}</p>
					</view>
					<image src="../../static/table/fee.png" mode="" v-if="i.tablefeetype!=0"></image>
				</view>
			</view>
			<view class="pt-f bottom-bar left-0 dp-f fd-cr z1000">
				<view class="bg-white p-all-32">
					<view class="dp-f ai-c jc-c fz-28 color-333 mb-20" v-if="SelectNum===0">
						<text style="margin-right: 50rpx;">就餐人数</text>
						<view style="width: 56rpx;height: 40rpx;" class="b-1 br-5 dp-f ai-c jc-c fz-28 ml-20">
							<u-number-box v-model="personnum" :min="1" :max="curtable.canuse+getcanselected()" :input-width="60"
							 :input-height="60" bg-color="#ff862f" color="#fff" :disabled="curtable.name == ''"></u-number-box>
							<!-- <text>{{n}}人</text> -->
						</view>
					</view>
					<view class="price">餐位费:￥{{getprice||0}}<text v-if="curtable.leastfee">(消费满￥{{curtable.leastfee}}免桌位费)</text></view>
					<!-- <view class="dp-f ai-c fw-w fz-28 color-333 mb-20" v-if="SelectNum>0">
						<text>已选</text>
						<view class="p-all-10 b-1 br-5 dp-f ai-c jc-c fz-28 ml-20" v-for="(optItem,optindex) in optArr" :key="optindex">
							{{optItem.RowNum+'排'+optItem.ColumnNum+'座'}}
						</view>
					</view> -->
					<view style="width: 686rpx;height: 90rpx;" class="dp-f jc-c ai-c br-10 fz-34 color-fff" :class="personnum>0?'bg-red-1':'bg-unbtn'"
					 @click="saveSeat">
						{{JSON.stringify(tablerecords) != '{}'?'更改座位':' 确认座位'}}
					</view>
				</view>
				<view class="dp-f jc-c ai-c mb-20 fz-28" v-if="showTis">
					<view class="dp-f jc-c ai-c m-0-10">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/table/unselected.png" mode="aspectFit"></image><span
						 class="ml-10">可选</span>
					</view>
					<view class="dp-f jc-c ai-c m-0-10">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/table/bought.png" mode="aspectFit"></image><span
						 class="ml-10">不可选</span>
					</view>
					<view class="dp-f jc-c ai-c m-0-10">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/table/selected.png" mode="aspectFit"></image><span
						 class="ml-10">选中</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				history: '',
				filters: {
					page: 1,
					size: 50,
					name: '',
					canuse: '',
					type: '',
					tablefeetype: null
				},
				cancel: true,
				conf: '确定',
				canc: '取消',
				content: '',
				show: false,
				tablename: '',
				personnum: 1,
				curindex: null,
				list: [{
						name: '选桌位'
					},
					{
						name: '选包间'
					}
				],
				curNow: 0,
				tablelist: [],
				bigtablelist: [],
				scaleMin: 1, //h5端为解决1无法缩小问题，设为0.95
				boxWidth: 400, //屏幕宽度px
				space: ' ', //空格
				seatArray: [], //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
				seatRow: 0, //影院座位行数
				seatCol: 0, //影院座位列数
				seatSize: 0, //座位尺寸
				SelectNum: 0, //选择座位数
				moveX: 0, //水平移动偏移量
				scale: 1, //放大倍数
				minRow: 0, //从第几行开始排座位
				minCol: 0, //从第几列开始排座位
				showTis: true, //显示选座提示
				seatList: [], //接口获取的原始位置
				mArr: [], //排数提示
				optArr: [], //选中的座位数组。
				isWXAPP: false,
				userinfo: null,
				toggleselect: false,
				curtable: {},
				taketable: {
					isadd: '0',
					name: '',
					userinfo: {
						account: '',
						personnum: 0
					}
				},
				curuser: "",
				tablerecords: {},
				taketableold: {
					isadd: '1',
					name: '',
					userinfo: {
						account: '',
						personnum: 0
					}
				},
				vuextabledetail: {}

			};
		},
		computed: {
			aPrice() {
				return this.SelectNum * 36
			},
			rpxNum() {
				return this.boxWidth / 750
			},
			pxNum() {
				return 750 / this.boxWidth
			},
			getprice() {
				return this.curtable.tablefee * this.personnum
			},
			...mapState(['tabledetail'])

		},
		onLoad() {
			this.userinfo = JSON.parse(uni.getStorageSync('currentUser'))
			//获取宽度
			uni.getSystemInfo({
				success: function(e) {
					this.boxWidth = e.screenWidth
					//#ifdef H5
					this.scaleMin = 0.95
					//#endif
				}
			})
		},
		async onShow() {
			this.gettablelist()
			this.curuser = JSON.parse(uni.getStorageSync('currentUser')).account
			this.vuextabledetail =uni.getStorageSync(this.curuser+'vuexstate')? JSON.parse(uni.getStorageSync(this.curuser+'vuexstate')).tabledetail:{}
			this.tablerecords = uni.getStorageSync(this.curuser+'tablerecords') ? JSON.parse(uni.getStorageSync(this.curuser+'tablerecords')) : {}
			// if(uni.getStorageSync('tablerecords1')){
				
			// }else{
			// 	this.$u.post('/table/getTableByaccount', {
			// 		account: this.curuser
			// 	}).then(res => {
			// 		this.history = res.data.data.name
			// 		this.taketableold.userinfo=res.data.data.orderuser.find(i=>i.account==JSON.parse(uni.getStorageSync('currentUser')).account)
			// 		if (uni.getStorageSync(this.curuser+'tablerecords') && res.data.data == null) {
			// 			console.log('缓存未清楚');
						
			// 		} else {
			// 			let name = res.data.data.name
			// 			if (this.tablelist.findIndex(i => i.name == name) >= 0) {
			// 				console.log('执行了进入1');
			// 				this.curindex = this.tablelist.findIndex(i => i.name == name)
			// 				this.curNow = 0
			// 				this.curtable = this.tablelist.find(i => i.name == name)
			// 				this.tablename=this.curtable.name
			// 			} else {
			// 				console.log('执行了进入2');
			// 				if (this.bigtablelist.findIndex(i => i.name == name) >= 0) {
			// 					this.curindex = this.bigtablelist.findIndex(i => i.name == name)
			// 					this.curNow = 1
			// 					this.curtable = this.bigtablelist.find(i => i.name == name)
			// 					this.tablename=this.curtable.name
				
			// 				}
			// 			}
			// 		}
			// 	})
			// }
			
			
		},
		methods: {
			...mapMutations(['SET_STATE']),
			gettablebyid(id) {
				this.$u.post('/table/gettablebyid', {
					id
				}).then(res => {
					this.curtable = res.data.data
					console.log(this.vuextabledetail, '进入获取桌位')
					// if (this.vuextabledetail != undefined) {
					this.taketable.userinfo.personnum = this.vuextabledetail.personnum
					this.personnum = this.vuextabledetail.personnum
					// this.taketable.name = this.curtable.name
					this.$set(this.taketable,'name',this.curtable.name)
					console.log(this.taketable.name,'this.taketable.name1');
					this.taketable.userinfo.account = JSON.parse(uni.getStorageSync('currentUser')).account
					this.taketable.isadd = "1"
					this.tablename = this.curtable.name
					this.taketableold = JSON.parse(JSON.stringify(this.taketable))
					// }

				})
			},
			getcanselected() {
				return this.curtable.orderuser ? this.curtable.orderuser.find(i => i.account == this.curuser) ? this.curtable.orderuser
					.find(i => i.account == this.curuser).personnum : 0 : 0
			},
			onPullDownRefresh() {
				this.gettablelist()
				let that = this
				setTimeout(() => {
					uni.stopPullDownRefresh();
					this.personnum = 1
					that.$refs.uToast.show({
						title: '刷新成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success',
						duration: 1000,
						position: "top"
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}, 200);
			},
			...mapMutations(['SET_TABLE']),
			gettablelist() {
				this.$u.post('/table/getTableByCategory', this.filters).then(async (res2) => {
					this.tablelist = res2.data.user.filter(i => i.type == 0)
					this.bigtablelist = res2.data.user.filter(i => i.type == 1)
					let ordernumber = uni.getStorageSync('ordernum') ? uni.getStorageSync('ordernum') : ''
					if (ordernumber) {
						console.log('执行了清楚');
						this.$u.post('/order/getOrderByOrdernum', {
							ordernumber
						}).then(res2 => {
							if (res2.data.data.status == "4") {
								uni.removeStorageSync(this.curuser+'tablerecords')
								uni.removeStorageSync(this.curuser+'vuexstate')
								uni.removeStorageSync('ordernum')
								this.curtable = {}
								this.tablerecords = {}
								this.CLEAN_TABLE()
							}
						})
					}
					if (JSON.stringify(this.tablerecords) != '{}') {
						this.curNow = this.tablerecords.curNow
						this.curindex = this.tablerecords.index
						this.vuextabledetail = JSON.parse(uni.getStorageSync(this.curuser+'vuexstate')).tabledetail
						// this.curtable=JSON.parse(JSON.stringify(this.vuextabledetail))
						// this.taketable.userinfo.personnum = this.vuextabledetail.personnum
						let res= await this.$u.post('/table/gettablebyid', {
							id:this.tablerecords.tableid
						})
						this.curtable = res.data.data
						this.taketable.userinfo.personnum = this.vuextabledetail.personnum
						this.personnum = this.vuextabledetail.personnum
						this.taketable.name = this.curtable.name
						// this.$set(this.taketable,'name',this.curtable.name)
						this.taketable.userinfo.account = JSON.parse(uni.getStorageSync('currentUser')).account
						this.taketable.isadd = "1"
						this.tablename = this.curtable.name
						this.taketableold = JSON.parse(JSON.stringify(this.taketable))
						// this.taketable.name = this.curtable.name
						// this.taketable.userinfo.account = JSON.parse(uni.getStorageSync('currentUser')).account
						// this.taketable.isadd = "1"
						// this.tablename = this.curtable.tablenumber
						// this.taketableold = JSON.parse(JSON.stringify(this.taketable))
						// this.gettablebyid(this.tablerecords.tableid)
					}
				})
			},
			async confirm() {
				// || this.history != ''
				if (JSON.stringify(this.vuextabledetail) != '{}' ) {
					this.taketableold = JSON.parse(JSON.stringify(this.taketable))
					// if(this.history != ''){
						// this.taketableold.name=this.history
						// this.taketableold.isadd='1'
						// this.taketableold.userinfo.account=JSON.parse(uni.getStorageSync('currentUser')).account
						// this.taketableold.name=this.vuextabledetail.name
						this.taketableold.isadd='1'
						this.taketableold.userinfo.account=JSON.parse(uni.getStorageSync('currentUser')).account
					// }
			this.taketableold.name=this.vuextabledetail.tablenumber
			this.taketableold.userinfo.personnum=this.vuextabledetail.personnum
			
			console.log(this.taketableold,'this.taketableold.name');
					let res=await this.$u.post('/table/changetableuse', this.taketableold)
					// .then(
					// res => {
						console.log(res, '取消桌位占用')
					// })
				}
				let selectedtable = {
					curNow: this.curNow,
					index: this.curindex,
					tableid: this.curtable._id,
					leastfee: this.curtable.leastfee
				}
				uni.setStorageSync(this.curuser+'tablerecords', JSON.stringify(selectedtable))
				this.taketable.isadd = "0"
				this.taketable.userinfo.starttime = Date.now()
				let res3=await this.$u.post('/table/changetableuse', this.taketable)
				// .then(res => {
					if (res3.data.code == -1) {
						let msg = res3.data.msg
						console.log(res3, '失败占用桌位')
						this.$refs.uToast.show({
							title: msg,
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
							type: 'error',
							duration: 1000,
							position: "top"
							// 如果不需要图标，请设置为false
							// icon: false
						})
						return false

					} else {
						let selectseat = []
						console.log(res3, '成功占用桌位')
						selectseat.push(this.tablename, this.personnum, this.getprice)
						this.SET_TABLE(selectseat)
						this.SET_STATE(this.$store.state)
						// #ifdef APP-PLUS
						uni.switchTab({
							url: '/pages/order/order',
							animationType: 'pop-in',
							animationDuration: 200
						})
						// #endif
						// #ifdef H5
						uni.switchTab({
							url: '/pages/order/order'

						})
						// #endif
					}

				// })

			},
			saveSeat() {
				if (this.tablename != '' && this.personnum != 0) {
					this.show = true
					this.content = `桌位：${this.tablename},用餐人数：${this.personnum}`
					this.taketable.name = this.curtable.name
					this.taketable.userinfo.account = JSON.parse(uni.getStorageSync('currentUser')).account
					this.taketable.userinfo.personnum = this.personnum
				} else {
					this.$refs.uTips.show({
						title: '请选择桌位和用餐人数',
						type: 'warning',
						duration: '1000'
					})
				}

			},
			sectionChange(index) {
				this.curNow = index;
				this.curindex = null
				this.tablename = ''
				if (JSON.stringify(this.tablerecords) != '{}') {
					if (this.tablerecords.curNow == index) {
						this.curindex = this.tablerecords.index

					}
				}
			},
			selecttable(item, index) {
				// if(item.selected ==true){
				// 	item.selected=false
				// 	item.selected=!item.selected
				// }
				if (this.curNow == 1) {
					if (item.capacity - item.canuse > 0) {
						let a = uni.getStorageSync(this.curuser+'vuexstate') ? JSON.parse(uni.getStorageSync(this.curuser+'vuexstate')).tabledetail.tablenumber :
							''
						if (a == '' || item.name != a) {
							this.curindex = null
							this.$refs.uTips.show({
								title: '该包间已经被占用了，换一间吧',
								type: 'warning',
								duration: '1000'
							})
							this.tablename = ''
							return

						} else {
							this.curindex = index
							this.tablename = item.name
						}
					} else {
						this.curindex = index
						this.tablename = item.name
					}
				} else {
					this.curindex = index
					this.tablename = item.name
				}
				this.curtable = item
				console.log(this.curtable,'sdsdsdsd');
				this.personnum = 1
			},
			//放大缩小事件
			onScale: function(e) {
				this.showTis = false
				// this.moveX=-e.detail.x
				let w = this.boxWidth * 0.5
				let s = 1 - e.detail.scale
				this.moveX = w * s
				this.scale = e.detail.scale
				if (s > 0 || s === 0) {
					this.showTis = true
				}
			},
			//移动事件
			onMove: function(e) {
				this.showTis = false
				this.moveX = e.detail.x
			},


		}
	}
</script>

<style lang="scss" scoped>
	.price {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
		font-size: 16px;

		text {
			color: red;
		}
	}

	.tablebox {
		width: 300px;
		height: 100px;
		display: flex;
		justify-content: flex-start;

		view {
			width: 140rpx;
			height: 100rpx;
			margin-right: 30rpx;
			margin-left: 20rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			image:last-child {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 0px;
				right: 0px;
			}

		}

	}

	.p-all-10 {
		padding: 10rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.m-0-10 {
		margin: 0 10rpx;
	}

	.bg-unbtn {
		background-color: #f9abb3;
	}

	.bg-red-1 {
		background-color: #F45664;
	}

	.br-10 {
		border-radius: 10rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.p-all-32 {
		padding: 32rpx;
	}

	.fd-cr {
		flex-direction: column-reverse;
		/* 主轴方向从下到上,默认从左到右 */
	}

	.bottom-bar {
		bottom: var(--window-bottom);
	}

	.color-fff {
		color: #fff
	}

	.br-15 {
		border-radius: 15rpx;
	}

	.over-h {
		overflow: hidden;
	}

	.dp-ib {
		display: inline-block;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.pa-v-2 {
		/* 定位垂直对齐 */
		left: 50%;
		transform: translateX(-50%)
	}

	.b-d-1 {
		border: 1px dashed #e5e5e5;
	}

	.w-100 {
		width: 100%;
	}

	.h-100 {
		height: 100%;
	}

	.bg-f1 {
		background-color: #f1f1f1;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.h-100vh {
		height: 100vh;
	}

	.pt-f {
		position: fixed;
	}

	.left-0 {
		left: 0;
	}

	.p-0-32 {
		padding: 0 32rpx;
	}

	.pt-20 {
		padding-top: 20rpx;
	}

	.bg-white {
		background-color: #fff;
	}

	.z1000 {
		z-index: 1000;
	}

	.fz-34 {
		font-size: 34rpx;
	}

	.fw-b {
		font-weight: bold;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.fz-28 {
		font-size: 28rpx;
	}

	.color-666 {
		color: #666666
	}

	.dp-f {
		display: flex;
	}

	.jc-c {
		justify-content: center;
	}

	.ai-c {
		align-items: center;
	}

	.fz-22 {
		font-size: 22rpx;
	}

	.color-333 {
		color: #333333
	}

	.m-0-a {
		margin: 0 auto;
	}

	.mt-48 {
		margin-top: 48rpx;
	}

	.fz-20 {
		font-size: 20rpx;
	}

	.color-999 {
		color: #999999
	}

	.b-1 {
		border: 1px solid #CCCCCC;
	}

	.br-5 {
		border-radius: 5rpx;
	}

	.Stage {
		background-color: #dddddd;
		width: 380rpx;
		height: 34rpx;
		transform: perspective(34rpx) rotateX(-10deg);
		margin: 0 auto;
	}

	.bg-line {
		background-color: rgba(0, 0, 0, 0.3);
	}

	// .sel-seat {
	// 	background: url('/static/selected.png') center center no-repeat;
	// 	background-size: 100% 100%;
	// }

	// .unsel-seat {
	// 	background: url('/static/unselected.png') center center no-repeat;
	// 	background-size: 100% 100%;
	// }

	// .bought-seat {
	// 	background: url('/static/bought.png') center center no-repeat;
	// 	background-size: 100% 100%;
	// }
</style>
